<template>
<!--  <div>-->
    <grid-item
      :x="itemBox.x"
      :y="itemBox.y"
      :w="itemBox.w"
      :h="itemBox.h"
      :i="itemBox.i"
      :key="itemBox.i"
      class="grid-item"
      @resize="resizeEvent"
      @move="moveEvent"
      @resized="resizedEvent"
      @moved="movedEvent"
      :item="watchitem(itemBox)"
    >
      {{ itemBox.i }}
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
    </grid-item>
<!--  </div>-->
</template>

<script>
import { GridItem } from "vue-grid-layout";

export default {
  props: ['itemBox'],
  name: "grid-item",
  components: {
    GridItem
  },
  data() {
    return {
      value: false
    }
  },
  methods: {
    init() {
      // this.layoutData = layoutData.mainData;
    },
    moveEvent: function (i, newX, newY, e) {
      //console.log(e)
      //console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
    },
    resizeEvent: function (i, newH, newW) {
      //console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
    },
    movedEvent: function (i, newX, newY, e) {
      //console.log(e)
      console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
    },
    resizedEvent: function (i, newH, newW, newHPx, newWPx) {
      //console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
    watchitem: function (item) {
      // let y_max=5
      // let x_max=6
      // if(item.y>y_max ||item.x>x_max){
      //     item.y=1
      //     item.x=1
      // }
      return item
    },
  }
}
</script>

<style scoped>
.grid-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  background-color: rgba(6, 30, 93, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

&-close {
   position: absolute;
   right: 5px;
   top: 0;
   font-size: 24px;
   cursor: pointer;
 }
}

.vue-grid-item {
  background: aquamarine;
}
</style>
